import React from 'react';
import { Alert, SafeAreaView, Text } from 'react-native';

interface AppState {
  data: string;
  num: number | null;
  show: boolean;
}

class App extends React.Component<{}, AppState> {
  // 1.1 构造函数
  constructor(props: {}) {
    super(props);
    console.log('1.1 构造函数');
    this.state = {
      data: '初始数据',
      num: null // 初始化为 null 或一个初始数字
      , show: false
    };
  }

  handlePress = () => {
    this.setState({
      num: Date.now()
    });
  };
  handleStop  = () => {
    this.setState({
      show: !this.state.show
    });
  };

//1.2  render 函数

//1.3 组件挂载完毕
componentDidMount() {
    console.log('1.3 组件挂载完毕');
  }
  render() {
    return (
      <SafeAreaView>
        <Text onPress={this.handlePress}>{this.state.num}</Text>
        <Text onPress={this.handlePress}>切换显示</Text>
        {this.state.show?<Btn />:<></>}
      </SafeAreaView>
    );
  }
}

class Btn extends React.Component<{}, AppState> { 
  componentWillUnmount(): void {
    Alert.alert('组件销毁了');
  }
  render(): React.ReactNode {
    return (
      <SafeAreaView>
        <Text>组件销毁了</Text>
      </SafeAreaView>
    );
  }
}

export default App;